﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="valid" uri="http://www.yst.org/tags/valid" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<base href="<%=basePath%>">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<title>银商通支付通信前置系统</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
	<meta name="description" content="银商通支付通信前置系统">
	<meta name="author" content="sheungxin">
	<!-- STYLESHEETS --><!--[if lt IE 9]><script src="js/flot/excanvas.min.js"></script><script src="js/flot/html5.js"></script><script src="js/css3-mediaqueries.js"></script><![endif]-->
	<link rel="stylesheet" type="text/css" href="css/cloud-admin.min.css" >
	<link rel="stylesheet" type="text/css"  href="css/themes/default.min.css" id="skin-switcher" >
	<link rel="stylesheet" type="text/css"  href="css/responsive.min.css" >
	
	<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
	<!-- JQUERY UI-->
	<link rel="stylesheet" type="text/css" href="js/jquery-ui-1.10.3.custom/css/custom-theme/jquery-ui-1.10.3.custom.min.css" />
	<!-- TYPEAHEAD -->
	<link rel="stylesheet" type="text/css" href="js/typeahead/typeahead.css" />
	<!-- SELECT2 -->
	<link rel="stylesheet" type="text/css" href="js/select2/select2.min.css" />
	<!-- UNIFORM -->
	<link rel="stylesheet" type="text/css" href="js/uniform/css/uniform.default.min.css" />
	<!-- JQUERY UI-->
	<link rel="stylesheet" type="text/css" href="js/jquery-ui-1.10.3.custom/css/custom-theme/jquery-ui-1.10.3.custom.min.css" />
	
</head>
<body  ng-app="qzApp" ng-controller="qzAppController">
			<div class="container">
				<div class="row">
					<div id="content" class="col-lg-12">
						<!-- PAGE HEADER-->
						<div class="row">
							<div class="col-sm-12">
								<div class="page-header">
									<!-- STYLER -->
									
									<!-- /STYLER -->
									<!-- BREADCRUMBS -->
									<ul class="breadcrumb">
										<li>
											<i class="fa fa-th-large"></i>
											<a href="manage/apps/list.jsp" target="user_main_iframe">应用管理</a>
											<li>应用修改</li>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<!-- /PAGE HEADER -->
						
						<!-- EXPORT TABLES -->
						<div class="row">
							<div class="col-md-12">
								<!-- BOX -->
								<div class="box border primary">
									<div class="box-title">
										<h4><i class="fa fa-bars"></i></h4>
										<div class="tools hidden-xs">
											<a href="javascript:;" class="reload" ng-click="refreshData()">
												<i class="fa fa-refresh"></i>
											</a>
											<a href="javascript:;" class="collapse">
												<i class="fa fa-chevron-up"></i>
											</a>
										</div>
									</div>
									<div class="box-body big">
										<form class="form-horizontal" role="form" id="myForm" name="myForm">
										  <div class="form-group">
											<label class="col-sm-2 control-label" for="name">应用名称</label>										 
											<div class="col-sm-4">
										  		<input type="text" id="name" name="name" class="form-control" ng-model="qzApp.name" value="{{qzApp.name}}" placeholder="应用名称不能为空">
											</div>
											<label class="col-sm-2 control-label" for="code">应用编码</label>
											<div class="col-sm-4">
											  <input type="text" id="code" name="code" class="form-control" ng-model="qzApp.code" value="{{qzApp.code}}" placeholder="应用编码不能为空">
											</div>							
										  </div>								  
										  <div class="form-group">
										  	<label class="col-sm-2 control-label" for="type">应用类型</label>															
											<div class="col-sm-4">
												<select id="type" name="type" ng-model="qzApp.type" style="width:100%">
													<option></option>
													<option ng-repeat="tp in typeList" value="{{tp.code}}" ng-selected="tp.code==qzApp.type">{{tp.name}}</option>
												</select>												 
											</div>
											<label class="col-sm-2 control-label" for="memo">应用说明</label>
											<div class="col-sm-4">
											  <input type="text" id="memo" name="memo" class="form-control" ng-model="qzApp.memo" value="{{qzApp.memo}}">
											</div>
										  </div>										  
										  <div class="form-group">
										  	<label class="col-sm-2 control-label" for="channelId">机构</label>											
											<div class="col-sm-4">
												<select id="channelId" name="channelId" ng-model="qzApp.channelId" style="width:100%">
													<option></option>
													<option ng-repeat="channel in channelList" value="{{channel.channelId}}" ng-selected="qzApp.channelId==channel.channelId">{{channel.name}}</option>
												</select>
											</div>
											<label class="col-sm-2 control-label" for="businessId">业务分类</label>																				
											<div class="col-sm-4">
												<select id="businessId" name="businessId" ng-model="qzApp.businessId" style="width:100%">
													<option></option>
													<option ng-repeat="business in businessList" value="{{business.businessId}}" ng-selected="qzApp.businessId==business.businessId">{{business.name}}</option>
												</select>
											</div>
										  </div>
										  <div class="form-group">
											<div class="col-sm-offset-3 col-sm-9">
											  <button type="button" class="btn btn-success" ng-click="appSave()">保存</button>
											  <button type="button" class="btn" ng-click="appReset()">重置</button>
											  <button type="button" class="btn btn-warning cancel" ng-click="appCancle()">返回</button>
											</div>
										  </div>
										 
									</div>
									<div class="modal fade" id="box-del" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
										<div class="modal-dialog">
									  		<div class="modal-content">
												<div class="modal-header">
										  			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
										  			<h4 class="modal-title">取消关联</h4>
												</div>
												<div class="modal-body" >
										  			此操作不可逆，确认要取消与【<font color="red">{{delItem.mes}}</font>】的关联吗？
												</div>
												<div class="modal-footer">
												  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
												  <button type="button" class="btn btn-primary" ng-click="rmAsso(delItem.id)">取消关联</button>
												</div>
									  		</div>
										</div>
								  	</div>									
									<table id="example-dark" class="table table-striped">
										<thead>
											<tr>	
												<th colspan="4" align="left">												
												<span id="box box-title h4">{{qzApp.name}}已关联的接口: {{interList.length}}</span>	
												</th>												
											</tr>
											<tr>	
												<th>接口名称</th>
												<th>业务分类</th>
												<th>机构</th>
												<th>操作</th>
											</tr>
										</thead>
										<tbody>
											<tr ng-repeat="it in interList" ng-cloak class="ng-cloak">	
												<td>{{it.interName}}&nbsp;</td>
												<td>{{it.businessName}}&nbsp;</td>
												<td>{{it.channelName}}&nbsp;</td>
												<td>													 
													<a href="javascript:void(0);" title="取消关联" class="dropdown-toggle" ng-click="rmAssoTip(it.appInterId,it.interName)">取消关联</a>
												</td>
											</tr>
										</tbody>
									</table>																 
									<div class="form-group">
										<div class="col-sm-offset-3 col-sm-9">
										  <button type="button" class="btn btn-success" ng-click="queryMatched()">检索匹配接口</button>
										  <button type="button" class="btn" ng-click="toggleSearch()">按条件查询</button>										  
										</div>						
									</div>
									<div ng-show='searchState.show' class="box">
										<div class="form-group">											
											<label class="col-sm-10 control-label">输入检索条件</label>											
										</div>
									    <div class="form-group">	
									    	<div class="separator"></div>								 									 
											<div class="col-sm-3"> 
										  		<input type="text" id="searchname" name="searchname" ng-model="searchname" placeholder="请输入待检索的接口名称" class="form-control">
											</div>																														
											<div class="col-sm-3">
												<select id="searchBid" name="searchBid" ng-model="searchBid" style="width:100%">
													<option></option>
													<option ng-repeat="business in businessList" value="{{business.businessId}}">{{business.name}}</option>
												</select>
											</div>																							
											<div class="col-sm-3">
												<select id="searchCid" name="searchCid" ng-model="searchCid" style="width:100%">
													<option></option>
													<option ng-repeat="channel in channelList" value="{{channel.channelId}}" >{{channel.name}}</option>
												</select>
											</div>
											<div class="col-sm-1">
												<button type="button" class="btn btn-success" ng-click="searchInter()">查询</button>
											</div>
										</div>
									</div>					 
									<table id="example-dark" class="table table-striped" ng-if="matchedInterList.length>0">
										<tr>	
											<th colspan="4" align="left">												
											<span id="box box-title h4">可关联的接口: {{matchedInterList.length}}</span>	
											</th>								
										</tr>									
										<tbody>
											<tr ng-repeat="mit in matchedInterList" ng-cloak class="ng-cloak">	
												<td>{{mit.interName}}&nbsp;</td>
												<td>{{mit.businessName}}&nbsp;</td>
												<td>{{mit.channelName}}&nbsp;</td>
												<td>													
													<a href="javascript:void(0)" ng-click="associate(mit.channelInterId,qzApp.appId)">关联此接口</a>
												</td>
											</tr>
										</tbody>
									</table>
									 <div class="form-group">&nbsp;</div>
									</form>
								</div>
								<!-- /BOX -->
							</div>
						</div>
						<!-- /EXPORT TABLES -->
						<div class="footer-tools">
							<span class="go-top">
								<i class="fa fa-chevron-up"></i> Top
							</span>
						</div>
					</div><!-- /CONTENT-->
				</div>
			</div>  
			<script src="js/jquery/jquery-2.0.3.min.js"></script>
	<!-- JQUERY UI-->
	<script src="js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
	<!-- BOOTSTRAP -->
	<script src="bootstrap-dist/js/bootstrap.min.js"></script>
	<script src="js/jquery-validate/jquery.validate.min.js"></script>
	<script src="js/jquery-validate/myvalidate.js"></script>
	<!-- SLIMSCROLL -->
	<script type="text/javascript" src="js/jQuery-slimScroll-1.3.0/jquery.slimscroll.min.js"></script><script type="text/javascript" src="js/jQuery-slimScroll-1.3.0/slimScrollHorizontal.min.js"></script>
	<!-- BLOCK UI -->
	<script type="text/javascript" src="js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
	<!-- COOKIE -->
	<script type="text/javascript" src="js/jQuery-Cookie/jquery.cookie.min.js"></script> 
	<!-- TYPEHEAD -->
	<script type="text/javascript" src="js/typeahead/typeahead.min.js"></script>
	<!-- AUTOSIZE -->
	<script type="text/javascript" src="js/autosize/jquery.autosize.min.js"></script>
	<!-- SELECT2 -->
	<script type="text/javascript" src="js/select2/select2.min.js"></script>
	<!-- UNIFORM -->
	<script type="text/javascript" src="js/uniform/jquery.uniform.min.js"></script>
	<!-- CUSTOM SCRIPT -->
	<script src="js/script.js"></script>
	<script>
		jQuery(document).ready(function() {
		   	App.init();
		});
	</script>
	<script src="js/angular.min.js"></script>
	<valid:jsValidate modelClass="com.yst.gateway.monitor.models.QzApplication" groupClass="Modify"></valid:jsValidate>
	<script src="js/modules/manage/apps/edit.js"></script>
</body>
</html>